<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex; background: blue;}
	.flex-item{ background: yellow;}
	.flex-item1{ width: 100px; height: 50px; flex-grow: 1;}
	.flex-item2{ width: 120px; height: 100px; }
	.flex-item3{ width: 60px; height: 80px;}
	.flex-item4{ width: 150px; height: 180px;}
	</style>
</head>
<body>
	<div class="flex-box">
		<div class="flex-item flex-item1">11</div>
		<div class="flex-item flex-item2">22</div>
		<div class="flex-item flex-item3">33</div>
		<div class="flex-item flex-item4">44</div>
	</div>
	<div>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</div>
	<div>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</div>
</body>
</html>